<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="企业名称" prop="companyName">
        <el-input
          v-model="queryParams.companyName"
          placeholder="请输入企业名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
          <el-option label="未审核" :value="1" />
          <el-option label="已通过" :value="2" />
          <el-option label="未通过" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮区域 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">
          新增季报
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
        >
          修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >
          删除
        </el-button>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-table
      v-loading="loading"
      :data="reportList"
      @selection-change="handleSelectionChange"
      stripe
      border
      height="calc(100vh - 300px)"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="企业名称" align="left" prop="companyName" min-width="180" />
      <el-table-column label="状态" align="center" prop="status" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" type="warning">未审核</el-tag>
          <el-tag v-if="scope.row.status === 2" type="success">已通过</el-tag>
          <el-tag v-if="scope.row.status === 3" type="danger">未通过</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" prop="createTime"  width="100"/>
      <el-table-column label="操作" align="center" width="220" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">
            详情
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">
            修改
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-check" @click="handleAudit(scope.row)">
            审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 季报表单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="200px">
        <!-- 企业信息 -->
        <el-card shadow="never">
          <div slot="header" class="card-header"><span>企业基本信息</span></div>
          <el-form-item label="企业名称" prop="companyName">
            <el-input v-model="form.companyName" placeholder="请输入企业名称" />
          </el-form-item>
          <el-form-item label="是否为教师创办企业" prop="teacherFounded">
            <el-radio-group v-model="form.teacherFounded">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否为大学生创办企业" prop="studentFounded">
            <el-radio-group v-model="form.studentFounded">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-card>

        <!-- 投融资与人员 -->
        <el-card shadow="never" class="mt-20">
          <div slot="header" class="card-header"><span>季度投融资与人员（单位：千元/人）</span></div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="本季度获得投融资总额" prop="currentFinance">
                <el-input-number v-model="form.currentFinance" :min="0" :controls="false" style="width:100%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="从业人员总数" prop="employees">
                <el-input-number v-model="form.employees" :min="0" :controls="false" style="width:100%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="吸纳应届大学毕业生" prop="freshGraduates">
                <el-input-number v-model="form.freshGraduates" :min="0" :controls="false" style="width:100%" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 知识产权与成果转化 -->
        <el-card shadow="never" class="mt-20">
          <div slot="header" class="card-header"><span>知识产权与成果转化</span></div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="专利申请数(件)" prop="patentApply">
                <el-input-number v-model="form.patentApply" :min="0" :controls="false" style="width:100%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="其中发明专利(件)" prop="inventionApply">
                <el-input-number v-model="form.inventionApply" :min="0" :controls="false" style="width:100%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="有效知识产权数(件)" prop="validIp">
                <el-input-number v-model="form.validIp" :min="0" :controls="false" style="width:100%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="其中发明专利(件)" prop="validInvention">
                <el-input-number v-model="form.validInvention" :min="0" :controls="false" style="width:100%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="成果转化总数(个)" prop="transferCount">
                <el-input-number v-model="form.transferCount" :min="0" :controls="false" style="width:100%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="依托高校数量(个)" prop="universityCount">
                <el-input-number v-model="form.universityCount" :min="0" :controls="false" style="width:100%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="产出成果数(个)" prop="outputCount">
                <el-input-number v-model="form.outputCount" :min="0" :controls="false" style="width:100%" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 审核对话框（与年报保持一致） -->
    <el-dialog :title="'审核 - ' + auditForm.companyName" :visible.sync="auditOpen" width="600px" append-to-body>
      <el-form ref="auditForm" :model="auditForm" label-width="120px">
        <el-form-item label="审核状态">
          <el-radio-group v-model="auditForm.status">
            <el-radio :label="2">通过</el-radio>
            <el-radio :label="3">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAudit">取 消</el-button>
        <el-button type="primary" @click="submitAudit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  AddHatchQuarterData,
  UpdataUserHatchQuarterData,
  HatchQuarterDatadetial,
  DelHatchQuarterData,
  GetUserHatchQuarterDataStatusGT0
} from '@/api/system/DataFrom';

export default {
  name: "HatchQuarterData",
  data() {
    return {
      loading: true,
      ids: [],
      single: true,
      multiple: true,
      showSearch: true,
      total: 0,
      reportList: [],
      title: "",
      open: false,
      auditOpen: false,
      queryParams: {
        current: 1,
        pageSize: 10,
        companyName: null,
        status: null
      },
      form: {},
      auditForm: { id: null, status: null, companyName: null },
      rules: {
        companyName: [{ required: true, message: "企业名称不能为空", trigger: "blur" }]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      GetUserHatchQuarterDataStatusGT0(this.queryParams).then(res => {
        this.reportList = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    handleQuery() {
      this.queryParams.current = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    reset() {
      this.form = {
        id: null,
        companyName: null,
        currentFinance: 0,
        employees: 0,
        freshGraduates: 0,
        teacherFounded: 0,
        studentFounded: 0,
        transferCount: 0,
        universityCount: 0,
        outputCount: 0,
        patentApply: 0,
        inventionApply: 0,
        validIp: 0,
        validInvention: 0
      };
      this.resetForm("form");
    },
    resetAudit() {
      this.auditForm = { id: null, status: null, companyName: null };
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    cancelAudit() {
      this.auditOpen = false;
      this.resetAudit();
    },
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加孵化器季报";
    },
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      HatchQuarterDatadetial(id).then(res => {
        this.form = res.data;
        this.open = true;
        this.title = "修改孵化器季报";
      });
    },
    handleView(row) {
      this.reset();
      HatchQuarterDatadetial(row.id).then(res => {
        this.form = res.data;
        this.open = true;
        this.title = "查看孵化器季报详情";
        this.$nextTick(() => {
          const els = this.$refs.form.$el.querySelectorAll('input,select,textarea,button');
          els.forEach(el => el.setAttribute('disabled', true));
        });
      });
    },
    handleAudit(row) {
      this.resetAudit();
      this.auditForm.id = row.id;
      this.auditForm.companyName = row.companyName;
      this.auditOpen = true;
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) return;
        if (this.form.id) {
          UpdataUserHatchQuarterData(this.form).then(() => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
        } else {
          this.form.status = 1;
          AddHatchQuarterData(this.form).then(() => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.getList();
          });
        }
      });
    },
    submitAudit() {
      UpdataUserHatchQuarterData({ id: this.auditForm.id, status: this.auditForm.status }).then(() => {
        this.$modal.msgSuccess("审核成功");
        this.auditOpen = false;
        this.getList();
      });
    },
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除所选的季报数据？').then(() => DelHatchQuarterData(ids))
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        });
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  background: #f5f7fa;
}
.card-header {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
}
.card-header::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  background: #409EFF;
  margin-right: 10px;
  border-radius: 2px;
}
.mt-20 {
  margin-top: 20px;
}
.dialog-footer {
  text-align: right;
  padding: 20px 0 0;
}
.el-card {
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}
:deep(.el-form-item) {
  margin-bottom: 18px;
}
:deep(.el-input-number) {
  width: 100%;
}
:deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>
